#ding{
    position: fixed;
    z-index: 99;
    width: 2vw;
    height: 2vw;
    border-radius: 2vw;
    right: 2vw;
    bottom: 10vw;
    &>a{
        width: 2vw;
        height: 2vw;
        border-radius: 2vw;
        border: 1px solid red;
        background-color: #111;
    }
}

#banner{
    width: 100%;
    // height: 200px;
    // height: 100vh;
    text-align: center;
    background: #111;
    padding-top: 1px;

    & > h3{
        color: #999;
        text-transform: uppercase;
        text-align: center;
        font-size: 34px;
        margin-top: 10vw;
        font-family: OSLight;

        & > span{
            color: #fcac45;
            font-family: OSBold;
        }
    }
    &>h4{
        color: #999;
        
        & > span{
            color: #c3c3c3;
            font-family: OSBold;
        }
    }
    &>a{
        margin-top: 18vw;
        margin-bottom: 12vw;
    }

}

#about{
    padding-top: 1px;
    .about-box{
        display: flex;
        width: 80%;
        margin: 0 auto;
        margin-top: 8vw;
        .left{
            width: 60%;
        }

        .right{
            width: 40%;
            
            .small-title{
                font-size: 20px;
                text-transform: uppercase;
                color: #636363;
                font-family: OSLight;
            }
            .title{
                text-transform: uppercase;
                font-size: 34px;
                font-family: OSLight;
                &>span{
                    color: #fcac45;
                    font-family: OSBold;
                }
            }
            .line{
                width: 100px;
                height: 5px;
                background: #fcac45;
                margin-top: .1vw;
                
            }
            .content{
                padding: 30px 0;
                width: calc(100vw/3.8);
                // font-size: 18px;
                color: #636363;
                font-family: OSLight;
            }

            & > ul{
                li{
                    display: flex;
                    align-items: center;
                    margin-bottom: 5px;
                    img{
                        margin-right: 5px;
                        width: 14px;
                        height: 14px;
                    }

                    div{
                        font-family: OSLtalic;
                        span{
                            font-family: OSBold;
                        }
                    }
                }
            
            }

            .about-btn{
                padding: 10px 0;
                border: 1px solid #ccc;
                width: 13vw;
                text-align: center;
                margin-top: 5vw;
                border-radius: 5px;
                font-size: 11px;
                text-transform: uppercase;
                img{
                    margin-top: -2px;
                }
            }
        }
    }
}

#team{
    background: #070707;
    padding-top: 1px;
    padding-bottom: 5vw;
    & > h3{
        text-align: center;
        margin-top: 5vw;
        font-size: 44px;
        text-transform: uppercase;
        color: #fff;
        font-family: OSLight;

        & > span{
            // 加粗字体 
            font-weight: 600;
        }
    }

    & > .line{
        width: 98px;
        height: 4px;
        background: #fcac45;
        margin: 0 auto;
    }

    & > .line2{
        width: 66px;
        height: 4px;
        background: #fcac45;
        margin: 10px auto 7vw;
    }

    .team-swiper{
        width: 80%;
        padding-bottom: 5vw;
        .list{
            display: flex;
            .item{
                text-align: center;
                img{
                    width: 128px;
                    height: 128px;
                    border-radius: 50%;
                }

                .nickname{
                    color: #fff;
                    margin: 1vw 0 .5vw;
                }

                .lang{
                    color: #fff;
                    font-family: OSLight;
                    font-size: 12px;
                }

                .content{
                    color: #fff;
                    margin-top: 1vw;
                    font-family: OSLight;
                }
            }
        }
        
        .swiper-pagination-bullet{
            background: #fff;
            border-radius: unset;
            opacity: 1;
        }

        .swiper-pagination-bullet-active{
            background: #fcac45;
        }
    }
}

#services{
    // background: #070707;
    padding-top: 1px;
    padding-bottom: 5vw;
    & > h3{
        text-align: center;
        margin-top: 5vw;
        font-size: 44px;
        text-transform: uppercase;
        color: #222222;
        font-family: OSLight;

        & > span{
            // 加粗字体 
            font-weight: 600;
        }
    }

    & > .line{
        width: 98px;
        height: 4px;
        background: #fcac45;
        margin: 0 auto;
    }

    & > .line2{
        width: 66px;
        height: 4px;
        background: #fcac45;
        margin: 10px auto 2vw;
    }

    &>.jie{
        width: 80%;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 7vw;
        font-size: 16px;
        font-family: OSLight;
    }
    &>.list{
        
        width: 80%;
        margin: 0 auto;
        display: flex;
        .item{
            text-align: center;
            img{
                width: 128px;
                height: 128px;
                border-radius: 50%;
            }

            .nickname{
                color: #222222;
                margin: 1vw 0 .5vw;
                font-weight: 600;
            }

            .content{
                color: #222222;
                margin-top: 1vw;
                font-family: OSLight;
            }
        }
    }
}

#clients{
    background: #070707;
    padding-top: 1px;
    padding-bottom: 5vw;
    & > h3{
        text-align: center;
        margin-top: 5vw;
        font-size: 44px;
        text-transform: uppercase;
        color: #fff;
        font-family: OSLight;

        & > span{
            // 加粗字体 
            font-weight: 600;
        }
    }

    & > .line{
        width: 98px;
        height: 4px;
        background: #fcac45;
        margin: 0 auto;
    }

    & > .line2{
        width: 66px;
        height: 4px;
        background: #fcac45;
        margin: 10px auto 7vw;
    }

    .team-swiper{
        width: 80%;
        padding-bottom: 5vw;
        .list{
            display: flex;
            .item{
                text-align: center;
                img{
                    margin: 2vw;
                    // width: 128px;
                    // height: 128px;
                    // border-radius: 50%;
                }
            }
        }
        
        .swiper-pagination-bullet{
            background: #fff;
            border-radius: unset;
            opacity: 1;
        }

        .swiper-pagination-bullet-active{
            background: #fcac45;
        }
    }
}

#work{
    padding-top: 1px;
    padding-bottom: 5vw;
    & > h3{
        text-align: center;
        margin-top: 5vw;
        font-size: 44px;
        text-transform: uppercase;
        color: #222222;
        font-family: OSLight;

        & > span{
            // 加粗字体 
            font-weight: 600;
        }
    }

    & > .line{
        width: 98px;
        height: 4px;
        background: #fcac45;
        margin: 0 auto;
    }

    & > .line2{
        width: 66px;
        height: 4px;
        background: #fcac45;
        margin: 10px auto 2vw;
    }

    &>.jie{
        width: 80%;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 7vw;
        font-size: 16px;
        font-family: OSLight;
    }
    &>.work-nav{
        .warp{
            width: 80%;
        }
        .navbar {
            // background: #111;
            border-color: transparent;
    
            .navbar-nav {
                display: flex;
                align-items: center;
    
                &>li {
                    // border-bottom: 3px solid transparent;
    
                    &>a {
                        color: #6c6c6c;
    
                    }
    
                    &>a:hover {
                        background: none;
                    }
                }
    
                &>li:nth-child(1) {
                    font-family: OSBold;
                }
    
                &>.line3 {
                    height: 18px;
                    width: 1px;
                    background-color: #6c6c6c;
                }
            }
        }
    
        .navbar{
            margin-bottom: 0;
            border-radius: 0;
        }
    
        .navbar-brand{
            text-transform: uppercase;
            color: #222222;
        }
    }
    &>.tu{
        margin: 0 auto;
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        &>img{
            width: 18vw;
            height: 18vw;
            margin-bottom: 2vw;
        }
        
    }
}

#testimonials{
    background: #070707;
    padding-top: 1px;
    padding-bottom: 5vw;
    & > h3{
        text-align: center;
        margin-top: 5vw;
        font-size: 44px;
        text-transform: uppercase;
        color: #fff;
        font-family: OSLight;

        & > span{
            // 加粗字体 
            font-weight: 600;
        }
    }

    & > .line{
        width: 98px;
        height: 4px;
        background: #fcac45;
        margin: 0 auto;
    }

    & > .line2{
        width: 66px;
        height: 4px;
        background: #fcac45;
        margin: 10px auto 7vw;
    }

    .team-swiper{
        width: 60%;
        padding-bottom: 5vw;
        .list{
            
            display: flex;
            flex-direction: column;
            align-items: center;
            &>.z1{
                text-align: center;
                color: #e8e8e8;
                font-size: 18px;
                font-family: OSLight;
                // font-family: OSBold;
                padding-bottom: 3vw;
            }
            &>.z2{
                color: #b2b2b2;
                margin-bottom: 1vw;
                &>span{
                    font-family: OSLight;
                }
            }
        }
        
        .swiper-pagination-bullet{
            background: #fff;
            border-radius: unset;
            opacity: 1;
        }

        .swiper-pagination-bullet-active{
            background: #fcac45;
        }
    }
}

#contact{
    padding-top: 1px;
    padding-bottom: 5vw;
    & > h3{
        text-align: center;
        margin-top: 5vw;
        font-size: 44px;
        text-transform: uppercase;
        color: #222222;
        font-family: OSLight;

        & > span{
            // 加粗字体 
            font-weight: 600;
        }
    }

    & > .line{
        width: 98px;
        height: 4px;
        background: #fcac45;
        margin: 0 auto;
    }

    & > .line2{
        width: 66px;
        height: 4px;
        background: #fcac45;
        margin: 10px auto 2vw;
    }

    &>.jie{
        width: 60%;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 7vw;
        font-size: 16px;
        font-family: OSLight;
    }

    &>.content{
        width: 60%;
        margin: 0 auto;
        color: #8d8d8d;
        &>.content-top{
            display: flex;
            margin-bottom: 1.5vw;
            justify-content: space-between;
            &>.a{
                width: 47%;
                &>input{
                    margin-top: .4vw;
                    width: 100%;
                    height: 2vw;
                    border-radius: none;
                }
                &>div span{
                    color: #db0000;
                }
            }
        }
        &>.content-message{
            width: 100%;
            &>textarea{
                margin-top: .4vw;
                width: 100%;
                height: 12vw;
                border-radius: none;
                resize:none;
            }
            &>div span{
                color: #db0000;
            }

        }
        &>.bottom{
            display: flex;
            justify-content: right;
            &>button{
                margin-top: 1.8vw;
                width: 15%;
                height: 2vw;
                line-height: 2vw;
                background-color: #fcac45;
                font-size: 16px;
                border: none;
                color: #fff;
            }
        }
    }
}

@media screen and (max-width: 1440px) {
    
}

@media screen and (max-width:1380px) {
    
}

@media screen and (max-width:1280px) {
    
}

@media screen and (max-width:1024px) {
    #about .about-box{
        flex-wrap: wrap;
        .left{
            width: 100%;
        }

        .right{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .line{
                display: none;
            }

            .content{
                width: calc(100vw / 2.8);
                text-align: center;
            }

            .about-btn{
                width: 22vw;
                margin-bottom: 5vw;
            }
            
        }
    }
}

@media screen and (max-width:768px) {
    #clients .list{
        flex-direction: column;
    }
}

@media screen and (max-width:375px) {
    #banner > h4{
        padding: 0 10px;
    }

    #about .about-box .right .content{
        width: calc(100vw / 1.1);
    }

    #about .about-box .right .about-btn{
        width: 50vw;
    }

    #team .team-swiper{
        padding-bottom: 10vw;
    }

    #team .team-swiper .list{
        flex-wrap: wrap;
        .item{
            margin-top: 15px;
        }
    }

    #services .list{
        flex-direction: column;
    }
    #services .list .item{
        margin-bottom: 2vw;
    }

    #work .tu img{
        width: 47%;
        height: 47%;
    }

    #contact .content .content-top{
        flex-direction: column;
    }
    #contact .content .content-top .a{
        width: 100%;
    }
    #contact .content .content-top .a input{
        height: 4vw;
    }
    #contact .content .bottom button{
        font-size: 8px;
        width: 30%;
        height: 4vw;
        line-height: 4vw;
    }

    #footer{
        height: 10vw;
    }
    #footer .left{
        font-size: 8px;
    }
    #footer .middle .right img{
        width: 4vw;
        height: 4vw;
        border-radius: 4vw;
        margin: 0 .6vw;
    }
}